<!-- <!DOCTYPE html/> -->
<html>
<head>
    <meta charset="utf-8">
    <title>数据可视化案例1</title>
    <script src="v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.hcharts.cn/highcharts/highcharts.js"></script>
</head>
<body>
<div id="app">
<!--    <button onclick="loadG()">刷新</button>-->
    <div id="container" style="max-width:800px;height:400px"></div>
</div>



<script type="text/javascript">
    var chart = Highcharts.chart('container', {
        chart: {
            type: 'column' // 平滑的曲线图：spline
        },
        title: {
            text: '第二个例子',
            align: 'center'
        },
        subtitle: {
            text:'数据来源：数据库',
            align: 'left'
        },
        xAxis: {
            crosshair: true,
            accessibility: {
                description: '类型'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '总数量'
            }
        },
        tooltip: {
            valueSuffix: ' (个)'
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: []
    });

    function loadG() {
        chart.showLoading("Loading....");
        var consumernumber = []
        var consumertypes = []
        axios.post('http://localhost:8080/api/sum/selectAllSum').then(function(res) {
            if (res.data.code === 1) {
                data = res.data.data
                datalength = res.data.data.length
                for (i = 0; i < datalength; i++) {
                    consumernumber[i] = data[i].number
                    consumertypes[i]=data[i].types
                }
                var consumernumberseries = {
                    data: consumernumber,
                    name: "类型"
                }
                chart.addSeries(consumernumberseries)
                chart.xAxis[0].setCategories(consumertypes, true);
            } else {
                window.alert(res.data.msg)
            }
        }).catch(function(err) {
            console.log("请求失败");
        })
        chart.hideLoading("Loading....");
    }

    // 自执行函数
    (function() {
        loadG()
    })();

</script>
</body>
</html>